<template>
    <div class='singletree' v-clickoutside="closeTreeFun">
        <el-input class="superior_input" v-model="label2" @focus="iptFocus" :readonly="true" placeholder='点击选择'>
        </el-input>
        <div class="act-btn">
            <i class="fa fa-trash-o" v-show="label2" @click="clearAll"></i>
            <i class="fa fa-times" @click="rescTreeShow=false" v-show="rescTreeShow"></i>
        </div>
        <div class="superior_tree" v-show="rescTreeShow">
            <simple-tree :style="{height: height + 'px'}" :treeData="deptData" @treeNodeClick="treeNodeClick">
            </simple-tree>
        </div>
    </div>
</template>
<script>
import $ from "jquery";
import simpleTree from "./simpleTree";
export default {
    name: "superior", // 上级选择
    components: { simpleTree },
    props: {
        value: { // v-model 返回的是树节点的id
            type: [String, Number],
            default: ""
        },
        label: {
            type: String,
            default: ""
        },
        treeData: {
            type: Array,
            default() {
                return [];
            }
        },
        height: {
            type: Number, // 高度
            default: 240
        }
    },
    data() {
        return {
            deptData: [],
            rescTreeShow: false,
            label2: ""
        };
    },
    watch: {
        treeData(val) {
            this.initTreeData(val);
        },
        treeNodeId(val) { // 父级重置时 重置label为空
            if (val == "") {
                this.$emit("update:label", "");
            }
        },
        label(val) {
            this.label2 = val;
        },
        value(val) {
            if(!val) {
                this.label2 = '';
                this.$emit("update:label", "");
            }
        },
    },
    computed: {
        treeNodeId: {
            get() {
                return this.value;
            },
            set(val) {
                this.$emit("input", val);
            }
        }
    },
    methods: {
        iptFocus() { // 输入框 聚焦时 显示上级树
            this.rescTreeShow = true;
        },
        clearAll() { // 清空按钮
            this.$emit('input', '');
            this.$emit("update:label", "");
        },
        initTreeData(val) { // 初始化树数据
            if (val.length > 0) {
                let data = this.formTreeData(val);
                this.deptData.splice(0, this.deptData.length);
                this.deptData.push(...data);
            } else {
                this.deptData.splice(0, this.deptData.length);
            }
        },
        treeNodeClick(treeNode, node) { // 树节点点击事件
            this.treeNodeId = treeNode.id;
            this.label2 = treeNode.name;
            if (treeNode.hasOwnProperty("children")) { // 点击的节点 如果没有下级节点，则关闭弹层
                if (
                    treeNode.children == null ||
                    treeNode.children.length == 0
                ) {
                    this.closeTreeFun();
                }
            } else {
                this.closeTreeFun();
            }
            this.$emit("update:label", this.label2);
            this.$emit("treeNodeClick", treeNode, node);
        },
        formTreeData(treeData) { // 生成树 数据
            let treeData2 = treeData.concat();
            let res = treeData2.map((item, index) => {
                if (item.name) {
                    item.label = item.name;
                    if (item.children && item.children.length > 0) {
                        this.formTreeData(item.children);
                    }
                } else {
                    item.name = item.label;
                    if (item.children && item.children.length > 0) {
                        this.formTreeData(item.children);
                    }
                }
                return item;
            });
            return res;
        },
        closeTreeFun() { // 点击空白处关闭
            this.rescTreeShow = false
        },
    }
};
</script>
<style lang="scss" scoped>
.singletree {
    position: relative;
    .el-tree {
        z-index: 3;
        position: absolute;
        height: 240px;
        overflow: auto;
    }
    .act-btn {
        position: absolute;
        right: 8px;
        top: 3px;
        i.fa-trash-o {
            float: left;
            margin: 8px 5px;
            cursor: pointer;
        }
        i.fa-times {
            float: right;
            margin: 8px 5px;
            cursor: pointer;
        }
    }
    .superior_input /deep/ .el-input__inner{
        vertical-align: middle;
    }
    .superior_tree{
        position: absolute;
        width: 100%;
        min-width: 200px;
        z-index: 5;
        top: 40px;
        padding: 2px;
        border: 1px solid #ddd;
    }
}
</style>
